<template>
  <div class="registration-order-detail">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1>
        订单详情-{{
          orderDetail.orderStatusName ||
          getOrderStatusText(orderDetail.orderStatus)
        }}
      </h1>
      <el-button @click="handleBack" type="primary"> 返回 </el-button>
    </div>

    <!-- 挂号信息 -->
    <el-card class="info-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>挂号信息</span>
        </div>
      </template>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="info-item">
            <label>就诊时间：</label>
            <span>{{ formatDateTime(orderDetail.visitTime) }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <label>就诊医院：</label>
            <span>{{ orderDetail.hospital }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <label>科室：</label>
            <span>{{ orderDetail.departmentName }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="info-item">
            <label>医生：</label>
            <span>{{ orderDetail.doctor }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <label>医生职称：</label>
            <span>{{ orderDetail.doctorTitle }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <label>医事服务费：</label>
            <span class="amount"
              >¥{{ orderDetail.medicalServiceFee?.toFixed(2) || "0.00" }}</span
            >
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="info-item">
            <label>挂号单号：</label>
            <span>{{ orderDetail.registrationNo }}</span>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 订单信息 -->
    <el-card class="info-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>订单信息</span>
        </div>
      </template>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="info-item">
            <label>订单编号：</label>
            <span>{{ orderDetail.orderNo }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <label>状态：</label>
            <el-tag :type="getOrderStatusType(orderDetail.orderStatus)">
              {{
                orderDetail.orderStatusName ||
                getOrderStatusText(orderDetail.orderStatus)
              }}
            </el-tag>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <label>应付金额：</label>
            <span class="amount"
              >¥{{ orderDetail.amount?.toFixed(2) || "0.00" }}</span
            >
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="info-item">
            <label>优惠券：</label>
            <span class="coupon"
              >-¥{{ orderDetail.couponAmount?.toFixed(2) || "0.00" }}</span
            >
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <label>实际支付：</label>
            <span class="actual-payment"
              >¥{{ orderDetail.actualPayment?.toFixed(2) || "0.00" }}</span
            >
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <label>创建时间：</label>
            <span>{{ formatDateTime(orderDetail.createTime) }}</span>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 就诊人信息 -->
    <el-card class="info-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>就诊人信息</span>
        </div>
      </template>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="info-item">
            <label>姓名：</label>
            <span>{{ orderDetail.patientName }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <label>性别：</label>
            <span>{{ orderDetail.patientSex }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <label>年龄：</label>
            <span>{{ orderDetail.patientAge }}岁</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="info-item">
            <label>联系电话：</label>
            <span>{{ orderDetail.patientPhone }}</span>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="info-item">
            <label>联系地址：</label>
            <span>{{ orderDetail.patientAddress || "暂无地址" }}</span>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { OrderAPI } from "../api/order";

// 路由
const route = useRoute();
const router = useRouter();
const orderId = route.params.id as string;

// 订单状态枚举
enum OrderStatus {
  PENDING = 0, // 待支付
  COMPLETED = 5, // 已完成
  CANCELLED = 10, // 已取消
  REFUNDED = 15, // 已退款
}

// 订单详情
const orderDetail = ref({
  id: 0,
  orderNo: "",
  createTime: "",
  patientId: 0,
  patientName: "",
  patientPhone: "",
  patientSex: "",
  patientAge: 0,
  patientAddress: "",
  amount: 0,
  orderStatus: 0,
  orderStatusName: "",
  visitTime: "",
  hospital: "",
  department: 0,
  departmentName: "",
  doctor: "",
  doctorTitle: "",
  medicalServiceFee: 0,
  registrationNo: "",
  couponAmount: 0,
  actualPayment: 0,
});

// 获取状态类型
const getOrderStatusType = (status: number) => {
  switch (status) {
    case OrderStatus.PENDING:
      return "warning";
    case OrderStatus.COMPLETED:
      return "success";
    case OrderStatus.CANCELLED:
      return "info";
    case OrderStatus.REFUNDED:
      return "danger";
    default:
      return "";
  }
};

// 获取状态文本
const getOrderStatusText = (status: number) => {
  switch (status) {
    case OrderStatus.PENDING:
      return "待支付";
    case OrderStatus.COMPLETED:
      return "已完成";
    case OrderStatus.CANCELLED:
      return "已取消";
    case OrderStatus.REFUNDED:
      return "已退款";
    default:
      return "未知";
  }
};

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return "";
  const date = new Date(dateTime);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = date.getHours();
  const minutes = String(date.getMinutes()).padStart(2, "0");

  // 获取星期几
  const weekdays = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
  const weekday = weekdays[date.getDay()];

  // 获取时间段
  let timeSlot = "";
  if (hours < 12) {
    timeSlot = "上午";
  } else if (hours < 18) {
    timeSlot = "下午";
  } else {
    timeSlot = "晚上";
  }

  return `${year}-${month}-${day} ${weekday} ${timeSlot}`;
};

// 返回上一页
const handleBack = () => {
  router.back();
};

// 加载订单详情
const loadOrderDetail = async () => {
  try {
    const response = await OrderAPI.getRegistrationOrderDetail(Number(orderId));
    console.log("挂号订单详情响应:", response);

    if (response.data) {
      orderDetail.value = response.data;
    }
  } catch (error) {
    console.error("加载挂号订单详情失败:", error);
    ElMessage.error("加载挂号订单详情失败");
  }
};

// 监听订单详情变化，更新页面标题
watch(
  orderDetail,
  (newDetail) => {
    if (newDetail.orderStatusName) {
      document.title = `订单详情-${newDetail.orderStatusName}`;
    } else if (newDetail.orderStatus !== undefined) {
      document.title = `订单详情-${getOrderStatusText(newDetail.orderStatus)}`;
    }
  },
  { deep: true }
);

// 组件挂载
onMounted(() => {
  loadOrderDetail();
});
</script>

<style scoped>
.registration-order-detail {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.info-card {
  margin-bottom: 20px;
}

.card-header {
  font-weight: 600;
  color: #303133;
}

.info-item {
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
}

.info-item label {
  font-weight: 500;
  color: #606266;
  min-width: 100px;
  margin-right: 8px;
}

.info-item span {
  color: #303133;
  flex: 1;
}

.amount {
  color: #f56c6c;
  font-weight: 600;
}

.coupon {
  color: #67c23a;
  font-weight: 600;
}

.actual-payment {
  color: #409eff;
  font-weight: 600;
}

@media (max-width: 768px) {
  .registration-order-detail {
    padding: 10px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .page-header h1 {
    font-size: 20px;
  }

  .info-item {
    flex-direction: column;
  }

  .info-item label {
    margin-bottom: 4px;
  }
}
</style>
